<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="./Swiper/swiper.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="./Swiper/swiper.min.js"></script>
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #000;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-top {
        height: 80%;
        width: 100%;
    }
    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
    
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
           <div class="swiper-slide swiper-slide-active" style="background-image: url(&quot;https://tse2-mm.cn.bing.net/th/id/OIP-C.XputlnO9grWiLbf9vno6lgHaKB?w=190&h=257&c=7&r=0&o=5&dpr=1.2&pid=1.7&quot;); width: 1601px;  height: 1100px; margin-right: 10px;"></div>
            <div class="swiper-slide swiper-slide-next" style="background-image: url(&quot;https://tse1-mm.cn.bing.net/th/id/OIP-C.IFETUbu-cZ5f0nb2DTQBZQHaJ8?w=190&h=255&c=7&r=0&o=5&dpr=1.2&pid=1.7&quot;); width: 1601px; height: 1100px;margin-right: 10px;"></div>
            <div class="swiper-slide" style="background-image: url(&quot;https://tse3-mm.cn.bing.net/th/id/OIP-C.rPot0_vf78mFJiB1DhIeCQHaKt?w=190&h=275&c=7&r=0&o=5&dpr=1.2&pid=1.7&quot;); width: 1601px; height: 1100px; margin-right: 10px;"></div>
            <div class="swiper-slide" style="background-image: url(&quot;https://tse2-mm.cn.bing.net/th/id/OIP-C.Ei_T8_P9G62jb1PjQR8r1QHaEK?w=190&h=107&c=7&r=0&o=5&dpr=1.2&pid=1.7&quot;); width: 1601px; height: 1100px; margin-right: 10px;"></div>
            <div class="swiper-slide" style="background-image: url(&quot;https://tse4-mm.cn.bing.net/th/id/OIP-C.rAy_JIyRNtqtK7fCQco-NQHaLR?w=190&h=290&c=7&r=0&o=5&dpr=1.2&pid=1.7&quot;); width: 1601px; height: 1100px; margin-right: 10px;"></div>

            
        </div>
        
        
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper" style="transform: translate3d(600.5px, 0px, 0px); transition-duration: 0ms;">
            <div class="swiper-slide swiper-slide-active" style="background-image: url(&quot;https://tse2-mm.cn.bing.net/th/id/OIP-C.XputlnO9grWiLbf9vno6lgHaKB?w=190&h=257&c=7&r=0&o=5&dpr=1.2&pid=1.7&quot;); margin-right: 10px;"></div>
            <div class="swiper-slide swiper-slide-next" style="background-image: url(&quot;https://tse1-mm.cn.bing.net/th/id/OIP-C.IFETUbu-cZ5f0nb2DTQBZQHaJ8?w=190&h=255&c=7&r=0&o=5&dpr=1.2&pid=1.7&quot;); margin-right: 10px;"></div>
            <div class="swiper-slide" style="background-image: url(&quot;https://tse3-mm.cn.bing.net/th/id/OIP-C.rPot0_vf78mFJiB1DhIeCQHaKt?w=190&h=275&c=7&r=0&o=5&dpr=1.2&pid=1.7&quot;); margin-right: 10px;"></div>
            <div class="swiper-slide" style="background-image: url(&quot;https://tse2-mm.cn.bing.net/th/id/OIP-C.Ei_T8_P9G62jb1PjQR8r1QHaEK?w=190&h=107&c=7&r=0&o=5&dpr=1.2&pid=1.7&quot;); margin-right: 10px;"></div>
            <div class="swiper-slide" style="background-image: url(&quot;https://tse4-mm.cn.bing.net/th/id/OIP-C.rAy_JIyRNtqtK7fCQco-NQHaLR?w=190&h=290&c=7&r=0&o=5&dpr=1.2&pid=1.7&quot;); margin-right: 10px;"></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <script>
    var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
    });
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
    
    </script>


</body></html>